<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        /* 
            盒子内容的大小 和 盒子所在网页上占据的大小是两会事。

            盒子所在网页上占据宽度：
                width + 左右的padding + 左右border + 左右的margin
            盒子所在网页上占据高度：
                height + 上下的padding + 上下border + 上下的margin
        */
        div{
            /* border: 1px solid red; */
            width: 300px;
            height: 300px;
            margin: 0 auto;

            /* 内边距  上右下左的四个方向的padding都是20px*/
            /* 给一个盒子，加了padding，那么它在网站的占据的大小会变大 */
            /* padding: 20px; */

            /* 单独设置上padding */
            /* padding-top: 20px; */


            /* padding后面跟1个值：表示上右下左的padding都是这个值 */
            /* padding: 20px; */

            /* 上下的padding是10px   左右的padding是20px */
            /* padding: 10px 20px; */

            /* 第一个值表示上  上padding是10px */
            /* 第二个值表示左右  左右padding是20px */
            /* 第三个值表示下  下padding是30px */
            /* padding: 10px 20px 30px; */

            /* 上 右 下 左 */
            /* padding: 10px 20px 30px 40px; */

            /* 设置间隙，可以调整padding */
            padding-top: 40px;
        }
    </style>
</head>
<body>
    <div>
        我是一个孤独的DIV
    </div>
</body>
</html>